@extends("layouts.backend.webadmin")
@section('page-header')
<h1>
    <small>access\user</small>
</h1>
@endsection

@section('content')

<!-- Main content -->
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-12">

            <div class="box">
                <!--<div class="box-header">
                    <h3 class="box-title btn btn-primary add-row role-add">增加</h3>
                </div>-->
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>

                        </tr>
                        </thead>

                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<form id="add-form">
    <div id="add" style="display: none;" class="box box-success">
        <div class="box-header with-border">
            <h3 class="box-title">添加角色</h3>
        </div>
        <div class="box-body">
            <input type="hidden" name="id">

            <div id="sort-order" style="display: none;" class="form-group">
                <label for="sort">排序</label>
                <input type="text" class="form-control" id="sort" placeholder="排序" name="sort">
            </div>
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="名称" name="name">
            </div>

            <div class="box-footer">
                <button id="submit-data" type="button" class="btn btn-primary ">确定</button>
            </div>
        </div>
        <!-- /.box-body -->
    </div>
</form>
@stop
@section('javascript-end')
<script src="{{env('APP_ROOT')}}/assets/layui/layui.all.js"></script>
<script src="{{env('APP_ROOT')}}/js/common.js"></script>
<script>
    $(function () {
        var m1 = manage();
        var tables = $('#example1').DataTable({
            //调整结构
            "dom": '<"toolbar">frti',
            'oLanguage'   :{
                'sUrl'    : '{{env("APP_ROOT")}}/assets/bootstrap/js/zh_cn.json'
            },
            "paging": false, // 禁止分页
            "bSort": false,//禁止排序
            "processing": true,
            "initComplete": function( settings, json ) {
                $('.toolbar').css({'float':'left'});
                var button = '<button class="btn btn-primary add-row role-add">增加</button>';
                $('.toolbar').html(button);
            },
            "fnPreDrawCallback": function( oSettings ) {
                $('.dataTables_filter input').attr({'placeholder': '请输入搜索内容'});//提示
            },
            stateSave: true,
            stateSaveCallback: function(settings,data) {
                localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
            },
            stateLoadCallback: function(settings) {
                return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
            },
            //开启服务器模式
            serverSide: true,
            ajax: {
                //指定数据源
                url: "{{route('admin.access.role.search')}}",
                type: "GET",
                data: function(d){
                    delete d.columns;
                    return d;
                },
                //接受服务器数据
                dataSrc:function(json){
                    getToken();
                    return json.data;
                }
            },
            //data值对应数据库字段名
            columns: [
                {
                    'title':'排序',
                    "data": "sort"
                },
                {
                    'title':'名称',
                    "data": "name"
                },
                {
                    'title':'创建时间',
                    "data": "created_at"
                },
                {
                    "title":"操作",
                    "targets": -2,
                    "data": null,
                    "render": function(data,type,row,meta){
                        var button = m1.button('role');
                        if(row.id!=1){
                            if(row.id==2 || row.id==3) {
                                return button[0];
                            }else{
                                return button[0] +"&nbsp"+ button[3];
                            }
                        }else{
                            return '';
                        }
                    }
                }],
                //所有列过滤xss
                columnDefs:[{
                    "targets": "_all",
                    "render": $.fn.dataTable.render.text()
                }],

                //解决不分页，显示分页信息（默认一页10条，页码总数错误的问题）
                "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {

                    return '当前第 1 页，共 1 页，总条数 ' + iTotal;

                }
        });
        //添加
        $('.box-body').on('click','button.add-row',function(){
            window.location.href = "{{route('admin.access.role.add')}}";
        });
        //编辑赋值
        $('#example1 tbody').on('click', 'button#editrow', function () {
            var data = tables.row($(this).parents('tr')).data();
            var id = data.id;
            var url = "{{route('admin.access.role.update')}}";
            url += '/'+id;
            window.location.href = url;

        });
        //删除记录
        $('#example1 tbody').on( 'click', 'button#delrow', function () {
            var _this = $(this);
            layer.confirm('确定删除吗?', function (index) {
                layer.close(index);
                var data = tables.row(_this.parents('tr') ).data();
                $.ajax({
                    url: "{{route('admin.access.role.delete')}}",
                    type: 'POST',
                    data: {id: data.id},
                    headers:{'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')}
                }).done(function(data) {
                    if (data.code === 0) {
                        getToken();
                        tables.ajax.reload();
                        //确认框
                    }else {
                        layer.msg(data.msg);
                    }
                }).fail(function() {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('服务器忙');

                    });
                });
            });
        });
    });
</script>
@endsection